<template>
  <div class="p-3 flex">
    <div class="w-12/20 ml-1">
      <!-- <CustomerCard :card-data="instrumentPanel" /> -->
      <InstrumentCard :datalist="meter" />
    </div>
    <div class="w-8/20 flex flex-col justify-between">
      <div class="mb-2 ml-2"><DeviceCard :datalist="device" /></div>
      <div class="mb-2 ml-2"><DeviceCard :datalist="alerts" /></div>
      <div class="mb-2 ml-2"><UsageCard :datalist="link" /></div>
      <div class="mb-2 ml-2"><UsageCard :datalist="document" /></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onBeforeUnmount, onMounted, ref } from 'vue';
  import InstrumentCard from './InstrumentCard.vue';
  import UsageCard from './UsageCard.vue';
  import DeviceCard from './DeviceCard.vue';
  import { useWebsocketStoreWithOut } from '/@/store/modules/thingsboard/websocket';
  import { useUserStore } from '/@/store/modules/user';

  const userStore = useUserStore();
  const ws = useWebsocketStoreWithOut();

  const device = ref<any>({
    name: '设备',
    key: 'device',
    canGo: true,
    ant: true,
    value: [
      { title: '活动', num: '10' },
      { title: '未活动', num: '20' },
      { title: '总数', num: '30' },
    ],
  });

  const alerts = ref<any>({
    name: '警报',
    canGo: true,
    key: 'alarm',
    ant: false,
    value: [
      { title: '严重', num: '10' },
      { title: '分配给我', num: '20' },
      { title: '总数', num: '30' },
    ],
  });

  const link = ref<Object>({
    name: '快速链接',
    canGo: false,
    canEdit: true,
    ant: 1,
  });

  const document = ref<Object>({
    name: '文档',
    canGo: false,
    canEdit: true,
    ant: 2,
  });

  const meter = ref<Object>({
    name: '仪表盘',
    canGo: true,
    key: 'dashboard',
    ant: true,
  });

  // 告警、设备数量
  const handleGetDeviceAndAlarmData = () => {
    let sendMsg = {
      alarmCountCmds: [
        {
          query: {
            statusList: ['ACTIVE'],
            searchPropagatedAlarms: false,
          },
          cmdId: ws.getAndIncrementCmdId(),
        },
        {
          query: {
            statusList: ['ACTIVE'],
            searchPropagatedAlarms: false,
            assigneeId: userStore.getUserInfo.id,
          },
          cmdId: ws.getAndIncrementCmdId(),
        },
        {
          query: {
            severityList: ['CRITICAL'],
            statusList: ['ACTIVE'],
            searchPropagatedAlarms: false,
          },
          cmdId: ws.getAndIncrementCmdId(),
        },
      ],
      entityCountCmds: [
        {
          query: {
            entityFilter: {
              type: 'entityType',
              resolveMultiple: true,
              entityType: 'DEVICE',
            },
          },
          cmdId: ws.getAndIncrementCmdId(),
        },
        {
          query: {
            entityFilter: {
              type: 'entityType',
              resolveMultiple: true,
              entityType: 'DEVICE',
            },
            keyFilters: [
              {
                key: {
                  type: 'SERVER_ATTRIBUTE',
                  key: 'active',
                },
                valueType: 'BOOLEAN',
                predicate: {
                  operation: 'EQUAL',
                  value: {
                    defaultValue: true,
                    dynamicValue: null,
                  },
                  type: 'BOOLEAN',
                },
              },
            ],
          },
          cmdId: ws.getAndIncrementCmdId(),
        },
        {
          query: {
            entityFilter: {
              type: 'entityType',
              resolveMultiple: true,
              entityType: 'DEVICE',
            },
            keyFilters: [
              {
                key: {
                  type: 'SERVER_ATTRIBUTE',
                  key: 'active',
                },
                valueType: 'BOOLEAN',
                predicate: {
                  operation: 'EQUAL',
                  value: {
                    defaultValue: false,
                    dynamicValue: null,
                  },
                  type: 'BOOLEAN',
                },
              },
            ],
          },
          cmdId: ws.getAndIncrementCmdId(),
        },
      ],
    };
    const cmdIdArr: number[] = [];
    for (let i = 0; i < 6; i++) {
      cmdIdArr.unshift(ws.getCmdId - i);
    }
    ws.send(cmdIdArr, sendMsg, (res) => {
      if (res.cmdUpdateType === 'COUNT_DATA') {
        switch (res.cmdId) {
          case cmdIdArr[3]:
            device.value.value[0].num = res.count;
            break;
          case cmdIdArr[4]:
            device.value.value[1].num = res.count;
            break;
          case cmdIdArr[5]:
            device.value.value[2].num = res.count;
            break;
        }
      } else if (res.cmdUpdateType === 'ALARM_COUNT_DATA') {
        switch (res.cmdId) {
          case cmdIdArr[0]:
            alerts.value.value[0].num = res.count;
            break;
          case cmdIdArr[1]:
            alerts.value.value[1].num = res.count;
            break;
          case cmdIdArr[2]:
            alerts.value.value[2].num = res.count;
            break;
        }
      }
    });
  };

  onMounted(() => {
    handleGetDeviceAndAlarmData();
  });

  onBeforeUnmount(() => {
    // 断开ws
    ws.close(['telemetry']);
  });
</script>
